<template>
  <div class="mobile-viewport">
    <NavBar />

    <RouterView v-slot="{ Component, route }" :key="$route.fullPath">
      <component :is="Component" :key="route.fullPath" />
    </RouterView>
  </div>
</template>

<script setup lang="ts">
import { computed, onMounted } from "vue";
import { useRoute } from "vue-router";
import { RouterView } from "vue-router";
import NavBar from "./components/NavBar.vue";

const route = useRoute();
const currentTransition = computed(() => route.meta.transitionName || "fade");

// 添加移动端适配
onMounted(() => {
  // 防止双击缩放
  let lastTouchEnd = 0;
  document.addEventListener(
    "touchend",
    (event) => {
      const now = Date.now();
      if (now - lastTouchEnd <= 300) {
        event.preventDefault();
      }
      lastTouchEnd = now;
    },
    false
  );

  // 禁止手势缩放
  document.addEventListener("gesturestart", (e) => {
    e.preventDefault();
  });

  // 添加viewport meta标签
  const meta = document.createElement("meta");
  meta.name = "viewport";
  meta.content =
    "width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no";
  document.head.appendChild(meta);

  // 防止页面缩放导致布局混乱
  const resizeObserver = new ResizeObserver(() => {
    const viewport = document.querySelector('meta[name="viewport"]') as HTMLMetaElement;
    viewport.content ="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no";

    if (window.visualViewport && window.visualViewport.scale !== 1) {
      viewport.content ="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no";
    }
  });
  resizeObserver.observe(document.body);
});
</script>

<style scoped>
.mobile-viewport {
  /* 确保布局不会超出视口 */
  max-width: 100vw;
  overflow-x: hidden;

  /* 防止移动端滚动反弹 */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* 防止文本大小调整 */
@media screen and (max-width: 768px) {
  body {
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }
}
</style>